<style scoped>
  .wrapper{
    width: 100%;
    min-height: 100%;
  }
  .oneScreen{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -5rem;
  }
  .header{height:44px;background-color:#f9f9f9;flex: 0 0 auto;}
  .back-button{background:none;border:0;}
  .back-button .fa{font-size:36px;margin-right:5px;}
  .right-button{height:44px;min-width:44px;}
</style>
<template>
    <div class="wrapper flex flex-v grey-e-bg" :class="oneScreen?'oneScreen':''">
        <header class="header flex flex-justify-between flex-align-center padding-left border-bottom" v-if="!isApp">
            <button class="back-button flex flex-align-center" v-if="showBack" @click="back">
                <i class="fa fa-angle-left grey-6" aria-hidden="true"></i>
                <span class="font-16 grey-6">{{backText}}</span>
            </button>
            <div class="title flex flex-justify-center" :style="{width:titleWidth+'px'}">
                <span class="font-18 nowrap ellipsis" v-if="showTitle">{{title}}</span>
                <slot name="title"></slot>
            </div>
            <div class="right-button">
                <slot name="right-item"></slot>
            </div>
        </header>
        <div class="page-box flex-1 grey-e-bg">
            <slot name="page"></slot>
        </div>
    </div>
</template>
<script>
  export default {
    props: {
      showBack: {
        type: [Boolean],
        default: true
      },
      backText: {
        type: [String],
        default: ''
      },
      replaceBackEvent: {// 如果为true，则点击返回不执行返回，而是回调父组件back函数
        type: [Boolean],
        default: false
      },
      title: {
        type: [String],
        default: '加载中...'
      },
      showTitle: {
        type: [Boolean],
        default: true
      },
      titleWidth: {// 标题的宽度
        type: [Number],
        default: 180
      },
      oneScreen: {
        type: [Boolean],
        default: false
      }
    },
    data () {
      return {
        isApp: false
      }
    },
    created () {
      const self = this
      self.isApp = self.$store.state.inAPP
    },
    methods: {
      back () {
        if (this.replaceBackEvent) {
          this.$emit('back')
          return
        }
        this.$router.back()
      }
    }
  }
</script>
